import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import Pts from 'prop-types'
import axios from 'axios'
// 验证码组件
// 后端用第三方工具生成, 形成一个 img 图片路径地址, 前端获取使用
const Captcha = forwardRef((props, ref) => {

  const [imgurl, setImgurl] = useState('')

  const getCaptcha = () => {
    axios.get('https://reactapi.iynn.cn/captcha/api/math').then(res => {
      // console.log(res)
      if(res.status === 200) {
        setImgurl(res.data.img)
        // 通过子传父吧 key 传递给 父组件保存
        props.savekey(res.data.key)
      }
    })
  }
  
  useEffect(() => {
    getCaptcha()
  }, [])

  // 使用 useImperativeHandle 把当前组件自身的
  useImperativeHandle(ref, () => ({ getCaptcha }))
  return (
    <div>
      <img src={imgurl} alt="" onClick={() => {getCaptcha()}}  
      width={props.width} height={props.height} />
    </div>
  );
})

// 属性约束
Captcha.propTypes = {
  savekey: Pts.func.isRequired,
  width: Pts.number,
  height: Pts.number
}

// 参数默认值
Captcha.defaultProps = {
  width: 140,
  height: 40
}

export default Captcha;
